<template>
  <div class="room">
    <div class="room-t">
      <div class="room-top">
        <!-- 状态 -->
        <el-select v-model="value" placeholder="入住状态" size="medium">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          size="medium"
          v-model="input"
          placeholder="单元名称"
        ></el-input>
        <el-input size="medium" v-model="input1" placeholder="幢号"></el-input>
        <el-input size="medium" v-model="input2" placeholder="房号"></el-input>
        <el-input
          size="medium"
          v-model="name"
          placeholder="住客姓名"
        ></el-input>
      </div>
      <div class="room-bottom">
        <!-- 按钮 -->
        <el-button
          type="primary"
          icon="el-icon-search"
          style="font-size: 15px"
          @click="inquire"
          >查询</el-button
        >
        <el-button
          type="success"
          icon="el-icon-upload2"
          style="font-size: 14px"
          @click="exportSelected"
          >批量导出</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          style="font-size: 14px"
          @click="deleteSelected"
          >批量删除</el-button
        >
      </div>
    </div>
    <div class="room-table">
      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          border
          v-loading="loading"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="110">
          </el-table-column>
          <el-table-column prop="unitname" label="单元名称" width="220">
          </el-table-column>
          <el-table-column prop="buildnum" label="幢号" width="200">
          </el-table-column>
          <el-table-column prop="storeynum" label="楼层号" width="200">
          </el-table-column>
          <el-table-column prop="homenum" label="房号" width="200">
          </el-table-column>
          <el-table-column prop="homename" label="住客姓名" width="200">
          </el-table-column>
          <el-table-column prop="unitstatus" label="状态" width="120">
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="160">
            <template slot-scope="scope">
              <div class="btn-group">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block unitnum">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      // 状态
      value: "", // 状态
      options: [
        {
          value: "1",
          label: "已入住",
        },
        {
          value: "2",
          label: "未入住",
        },
      ],
      input: "", // 单元名
      input1: "", // 号
      input2: "", // 房号
      name: "", // 住客名
      // 表单
      tableData: [],
      multipleSelection: [],
      // 分页
      currentPage4: 1,
      total: 0, // 总页数
      pageSize: 10, // 每页显示条数
      num: 0, // 条数
      token: localStorage.getItem("token"),
      // 需要导出的数据
      selectedRows: [],
      // 批量删除
      deleteRows: [],
    };
  },
  created() {
    this.apply();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    // 渲染
    apply() {
      console.log(11);
      this.$axios({
        url: "/house/gethouseList",
        method: "get",
        params: {
          currPage: this.num,
          pageNum: this.pageSize,
        },
      }).then((res) => {
        console.log(res);
        setTimeout(() => {
          this.loading = false;
        }, 500);
        this.tableData = res.data.data;
        this.total = res.data.total;
        for (let a = 0; a < this.tableData.length; a++) {
          if (this.tableData[a].unitstatus == 1) {
            this.tableData[a].unitstatus = "未入住";
          } else if (this.tableData[a].unitstatus != 1) {
            this.tableData[a].unitstatus = "已入住";
          }
          // 幢号
          if (this.tableData[a].buildnum == undefined) {
            this.tableData[a].buildnum = "暂无";
          }
          // 住客姓名
          if (this.tableData[a].homename == undefined) {
            this.tableData[a].homename = "暂无";
          }
          // 房号
          if (this.tableData[a].homenum == undefined) {
            this.tableData[a].homenum = "暂无";
          }
          // 楼层号
          if (this.tableData[a].storeynum == undefined) {
            this.tableData[a].storeynum = "暂无";
          }
        }
      });
    },
    // 查询
    inquire() {
      this.$axios({
        url: "/house/searchnumList",
        method: "get",
        params: {
          homestatus: this.value,
          unitname: this.input,
          buildnum: this.input1,
          homenum: this.input2,
          homename: this.name,
          currPage: this.num,
          pageNum: this.pageSize,
          token: this.token,
        },
      }).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.tableData = res.data.data;
        if (this.total == undefined) {
          this.total = 0;
        }
        for (let a = 0; a < this.tableData.length; a++) {
          if (this.tableData[a].unitstatus == 1) {
            this.tableData[a].unitstatus = "未入住";
          } else if (this.tableData[a].unitstatus != 1) {
            this.tableData[a].unitstatus = "已入住";
          }
          // 幢号
          if (this.tableData[a].buildnum == undefined) {
            this.tableData[a].buildnum = "暂无";
          }
          // 住客姓名
          if (this.tableData[a].homename == undefined) {
            this.tableData[a].homename = "暂无";
          }
          // 房号
          if (this.tableData[a].homenum == undefined) {
            this.tableData[a].homenum = "暂无";
          }
          // 楼层号
          if (this.tableData[a].storeynum == undefined) {
            this.tableData[a].storeynum = "暂无";
          }
        }
      });
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.apply();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.num = val - 1;
      this.apply();
    },
    handleEdit(index, row) {
      console.log(index, row);
      // 跳转
      this.$router.push({
        path: "/house/numadd",
        query: {
          id: row.id,
        },
      });
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm("此操作将删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          url: "house/delunitList",
          method: "get",
          params: {
            id: row.id,
            token: this.token,
          },
        }).then((res) => {
          console.log(res);
          this.apply();
        });
      });
      console.log(index, row);
    },
    // 多选事件
    handleSelectionChange(rows) {
      this.selectedRows = rows; // 导出的数据
      this.deleteRows = rows; // 删除的数据
    },
    // 导出选中的数据
    exportSelected() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请选择要导出的数据");
        return;
      } else {
        this.$confirm("此操作将该文件导出, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          // 调用导出方法
          this.exportToExcel(this.selectedRows);
        });
      }
    },
    // 导出为 Excel
    exportToExcel(data) {
      // 使用第三方库（如 xlsx）导出数据
      import("xlsx").then((XLSX) => {
        const worksheet = XLSX.utils.json_to_sheet(data);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
        XLSX.writeFile(workbook, "导出数据.xlsx");
      });
    },
    // 批量删除
    deleteSelected() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请选择要删除的数据");
        return;
      }

      // 确认删除
      this.$confirm("确定要删除选中的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 调用删除方法
          this.deleteRow(this.selectedRows);
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 删除数据
    deleteRow(rows) {
      const selectedIds = rows.map((row) => row.id); // 获取选中的 ID
      this.tableData = this.tableData.filter(
        (row) => !selectedIds.includes(row.id)
      ); // 过滤掉选中的数据
      this.$message.success("删除成功");
    },
  },
};
</script>

<style lang="scss" scoped>
// 搜索
.room::v-deep {
  .el-input--medium .el-input__inner {
    height: 38px;
  }
}
.room-t {
  display: flex;
  margin-bottom: 20px;
}
.room-top {
  width: 100%;
  display: flex;
}
.el-input {
  width: 220px;
  margin-left: 10px;
}
// 按钮
.room-bottom {
  display: flex;
}
.btn-group {
  display: flex;
}
// 分页
.unitnum {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>